<template>
    <div>
        <div>
            <div>
                <el-input
                    class="searchInput"
					clearable
					@clear="clearKeyword"
                    placeholder="请输入工号进行搜索..."
                    @keydown.enter.native="doSearch"
                    prefix-icon="el-icon-search"
                    v-model="keyword"
                    style="width: 350px;margin-right: 10px">
            </el-input>
            <el-button icon="el-icon-search" @click="doSearch" type="primary">搜索</el-button>
            <el-button icon="el-icon-plus" @click="showAddView" type="primary">添加教师</el-button>
            </div>
            <div style="margin-top: 10px">
                <el-table   
                        :data="teachers"
                        stripe
                        border
						@selection-change="handleSelectionChange"
                        style="width: 67%">
                    <el-table-column
                            type="selection" width="55">
                    </el-table-column>
                    <el-table-column
                            prop="jobId" label="工号" width="130">
                    </el-table-column>
                    <el-table-column
                            prop="name" label="姓名" width="70">
                    </el-table-column>
                    <el-table-column
                            prop="gender" label="性别" width="60">
                    </el-table-column>
                    <el-table-column
                            prop="jobTitle" label="职称" width="80">
                    </el-table-column>
                    <el-table-column
                            prop="email" label="邮箱" width="200">
                    </el-table-column>
                    <el-table-column
                            prop="telephone" label="电话" width="130">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="showEditView(scope.row)" style="padding: 8px" size="small" type="primary">编辑</el-button>
                            <el-button @click="doDelete(scope.row)" style="padding: 8px" size="small" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-button size="small" @click="doDeleteSome" type="danger" icon="el-icon-delete" style="padding: 8px">批量删除</el-button>
                <el-pagination
                        background
                        @current-change="currentChange"
						:current-page="current"
						:page-size="size"
                        layout="total, prev, pager, next, jumper, ->, slot"
                        :total="total">
                </el-pagination>
            </div>
			
            <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" 
						:close-on-click-modal="false" :destroy-on-close="destroyOnClose">
				<div slot="title" class="dialog-title">
					<p class="setFont">{{ title }}</p>
				</div>
                <div class="formSet">
                    <el-form :model="teacherInfo" :rules="rules" ref="teacherForm" label-width="100px">                        
                        <el-form-item label="工号" prop="jobId">
                            <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="teacherInfo.jobId" placeholder="请输入工号"></el-input>
                        </el-form-item>     
                        <el-form-item label="姓名" prop="name">
                            <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="teacherInfo.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>   
                        <el-form-item label="性别">
                                <el-radio-group v-model="teacherInfo.gender">
                                    <el-radio label="男" style="margin-left: 5px;">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                        </el-form-item>
                        <el-form-item label="职称">
                            <el-select v-model="teacherInfo.jobTitle" size="small" style="width:180px;" placeholder="请选择职称">
                                <el-option
                                        v-for="item in jobTitles"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item> 
                        <el-form-item label="邮箱">
                            <el-input v-model="teacherInfo.email" style="width:180px" 
                                        size="small" placeholder="请输入邮箱">
                            </el-input>
                        </el-form-item> 
                        <el-form-item label="电话">
                            <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="teacherInfo.telephone" placeholder="请输入电话号码"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doAddOrEdit">确 定</el-button>
                </span>
            </el-dialog>        
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                teachers:[],             
                keyword:'',
				multipleSelection: [],
				current: 1,
				size: 10,
                total: 0,
                title: '',
                dialogVisible: false,
				destroyOnClose: false,
                teacherInfo: [],
                jobTitles:["助教","讲师","副教授","教授"],
                classes:[],
                rules:{
                    jobId: [{required: true, message: '请输入工号',trigger: 'blur'}],
                    name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    // gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    // jobTitle: [{required: true, message: '请选择职称', trigger: 'blur'}],
                    // email: [{required: true, message: '请输入邮箱', trigger: 'blur'},
                    //         {type: "email",message: '邮箱格式不正确',trigger:'blur'}],
                    // telephone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
                },
            }
        },
		mounted() {
			this.initTeachers();
		},
        methods: {
			initTeachers(){
				let url = '/information/teacher/?current=' + this.current + '&size=' + this.size + '&keyword=' + this.keyword;
				this.getRequest(url).then(resp => {
					if(resp){
						this.teachers = resp.data;
						this.total = resp.total;
					}
				})
			},
			currentChange(page){
				this.current = page;
				this.initTeachers();
			},
			clearKeyword(){
				this.current = 1;
				this.initTeachers();
			},
            doSearch(){
				this.current = 1;
				this.initTeachers();
            },
			emptyTeacherInfo(){
				this.teacherInfo = {};
			},
            showAddView(){
				this.emptyTeacherInfo();
				this.destroyOnClose = true;
				this.title = '添加教师';
                this.dialogVisible = true;
            },
            doAddOrEdit(){
				if (this.teacherInfo.id) {
					this.$refs['teacherForm'].validate(valid => {
						if (valid) {
							this.putRequest("/information/teacher/", this.teacherInfo).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initTeachers();
								}
							})
						}
					});
				} else {
					this.$refs['teacherForm'].validate(valid => {
						if (valid) {
							this.postRequest("/information/teacher/", this.teacherInfo).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initTeachers();
								}
							})
						}
					});
				}
            },
            doDelete(data){
				this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/information/teacher/" + data.id).then(resp => {
						if (resp) {
							this.initTeachers();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
            },
            doDeleteSome(){
				let ids = [];
				for (let data of this.multipleSelection) {
					ids.push(data.id);
				}
				this.$confirm('此操作将删除【' + ids.length + '】条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/information/teacher/" , ids).then(resp => {
						if (resp) {
							this.initTeachers();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
            },
            showEditView(data){
                this.title = '修改教师信息';
				this.teacherInfo = data;
                this.dialogVisible = true;
				this.destroyOnClose = true;
            },
			handleSelectionChange(val){
				this.multipleSelection = val;
			},
        }
    }
</script>

<style scoped>
    .page{
        width: 67%;
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
    }
	.formSet{
		display: flex;
		justify-content: flex-start;
	}
	.setFont{
		font-size: larger;
	}

</style>